<template>

<!-- 在插槽进行替换的时候。防止属性不起效果。可以在外面包裹一层div，这样保证替换的时候，div上的属性保存了下来
替换的是。只是替换里面插槽里的内容
 -->

<div class="tab-bar-item" @click="itemClick">
    <!-- 当 if为true时，显示item-icon插槽。否则显示-->
    <div v-if="!isActive">
        <slot name="item-icon">
    </slot>
    </div>

   <div v-else>
        <slot name="item-icon-active"></slot>
   </div>
    

<!-- 判断 -->
    <div :style="styleColor">
        <slot name="item-text">
    </slot>

    </div>


</div>
  
</template>

<script>
export default {
    data () {
        return {
            //不写死，一般使用下面的计算属性
            //isActive:true
        }
    },
    //使用计算属性
    computed: {
      isActive(){
          //拿到处于活跃路由的path判断是否包含当前组件中的path，这个属性就为true
          //就会同时判断App.vue中的四个TabBarItem   每个TabBarItem组件的path值在App.vue中赋值都不一样
        return this.$route.path.indexOf(this.path) !== -1
        // ==-1表示在当前活跃的路由中没有找到这个组件中的path
      },
      styleColor(){
          return this.isActive?{color:this.activeColor}:{}
      }  
    },
    methods: {
        itemClick(){
            this.$router.replace(this.path).catch(err=>err)
            console.log(this.path)
            console.log(this.teaa)
}
    },

    /* 父组件中的使用本组件里面的属性可以直接赋值到子组件中 
    就好像父组件中设置的teaa*/
    props:{
        path: String,
        teaa: String,
        activeColor:{
            type:String,
            default:'red'
        }
    }

}
</script>

<style>
.tab-bar-item{
  /* 将每个均等分为1 */
  flex: 1;
  /* 规定文本的对其方式 */
  text-align: center;
/*tabbar 一般高度49  普遍上都是这个高度*/
  height: 49px;
  font-size: 14px;
}


.tab-bar-item img{

    width: 24px;
    height: 24px;
    margin-top: 3px;
    vertical-align: middle;
    margin-bottom: 2px;

}

.active{
    color: slateblue;
}
</style>